<template>
    <div class="nursing-level-container">
        <h2 class="title">护理级别</h2>

        <!-- 查询表单（左查询右添加） -->
        <el-form :inline="true" :model="searchForm" class="search-form">
            <div class="search-left">
                <el-form-item label="名称:">
                    <el-input v-model="searchForm.levelName" placeholder="请输入级别名称" />
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 150px;">
                        <el-option label="全部" value="" />
                        <el-option label="启用" value="1" />
                        <el-option label="停用" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button type="default" @click="handleReset">重置</el-button>
                </el-form-item>
            </div>
            <div class="search-right">
                <el-button type="success" @click="handleAdd">添加</el-button>
            </div>
        </el-form>


        <!-- 表格 -->
        <el-table :data="tableData" v-loading="loading" border style="width: 100%; background: #f5f7fa;"
            :header-cell-style="{ background: '#f9fafc', color: '#333', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="levelName" label="名称" width="400" />
            <el-table-column prop="status" label="状态" width="250">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
                        {{ scope.row.status === '1' ? '启用' : '停用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="400">
                <template #default="scope">
                    <div class="button-group">
                        <el-button type="danger" size="small" @click="disable(scope.row)">停用</el-button>
                        <el-button type="success" size="small" @click="edit(scope.row)">修改</el-button>
                        <el-button type="primary" size="small" @click="config(scope.row)">配置</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-bar">
            <el-pagination v-model:current-page="pagination.cur" v-model:page-size="pagination.size"
                :page-sizes="[2, 5, 10]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 弹窗组件 -->
        <AddNursingLevel ref="addDialogRef" @refresh="handleSearch" />
        <EditNursingLevel ref="editDialogRef" @refresh="handleSearch" />
        <ConfigureNursingLevel ref="configDialogRef" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {inject} from 'vue'
const axios = inject("axios")

import { ElMessage, ElMessageBox } from 'element-plus'
import AddNursingLevel from '@/components/nursing/nursingLevel/AddNursingLevel.vue'
import EditNursingLevel from '@/components/nursing/nursingLevel/EditNursingLevel.vue'
import ConfigureNursingLevel from '@/components/nursing/nursingLevel/ConfigureNursingLevel.vue'

// 查询条件
const searchForm = ref({ levelName: '', status: '1' })

// 数据与状态
const tableData = ref([])
const loading = ref(false)
const pagination = ref({ cur: 1, size: 5, total: 0 })

const query = async (page) => {
    loading.value = true
    try {
        const res = await axios.get('/nursingLevel/pageNursingLevel', {
            params: {
                cur: page,
                number: pagination.value.size,
                levelName: searchForm.value.levelName || '',
                status: searchForm.value.status || ''
            }
        })
        if (res.data.status === 200) {
            tableData.value = res.data.data || []
            pagination.value.total = res.data.total || 0
        } else {
            ElMessage.warning(res.data.msg || '加载失败')
        }
    } catch (err) {
        ElMessage.error('请求失败：' + err.message)
    } finally {
        loading.value = false
    }
}

const handleSearch = () => {
    pagination.value.cur = 1
    query(1)
}

const handleReset = () => {
    searchForm.value.levelName = ''
    searchForm.value.status = '1'
    pagination.value.cur = 1
    query(1)
}

const handleCurrentChange = (page) => {
    pagination.value.cur = page
    query(page)
}
const handleSizeChange = (size) => {
    pagination.value.size = size
    pagination.value.cur = 1
    query(1)
}

const addDialogRef = ref()
const editDialogRef = ref()
const configDialogRef = ref()

const handleAdd = () => addDialogRef.value.open()
const edit = (row) => editDialogRef.value.open(row)
const config = (row) => configDialogRef.value.open(row.levelId, row.levelName)

const disable = async (row) => {
    try {
        await ElMessageBox.confirm(`确认停用级别「${row.levelName}」吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        const res = await axios.post('/nursingLevel/deleteNursingLevel', null, {
            params: { levelId: row.levelId }
        })
        if (res.data.status === 200) {
            ElMessage.success('停用成功')
            handleSearch()
        } else {
            ElMessage.error(res.data.msg || '停用失败')
        }
    } catch {
        // 用户取消
    }
}

onMounted(() => {
    query(1)
})
</script>

<style scoped>
.nursing-level-container {
    padding: 20px;
}

.title {
    font-size: 27.2px;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: #333;
}

.search-form {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.search-left {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.search-right {
    display: flex;
    align-items: center;
}


.button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pagination-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 2%;
    margin-bottom: 2%;
}
</style>
